<template>
  <div class="echart" ref="chartDom"></div>
</template>

<script setup lang="ts" scoped>
import { inject, ref, onMounted, watch } from "vue";
const echarts = inject("echarts") as any;
const chartDom = ref<any>(null);
const myChart = ref<any>(null);
const props = defineProps({
  options: {
    type: Object,
    default: {},
    required: true,
  },
});
const resizeHandler = () => {
  myChart.value.resize();
};
onMounted(() => {
  myChart.value = echarts.init(chartDom.value);
  myChart.value.setOption(props.options, true);
  window.addEventListener("resize", resizeHandler);
});
watch(
  () => props.options,
  (newOptions) => {
    myChart.value.setOption(newOptions);
  },
  {
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.echart {
  width: 500px;
  height: 500px;
}
</style>
